<template>
  <view class="fab-nav-bar-container">
    <view class="fab-nav-bar" :style="wrapperStyle">
      <template v-if="!onlyStatusBar">
        <view class="west" :style="westStyle">
          <base-buttons :light="light" :buttons="westButtons" :buttonStyle="btnStyle" />
          <slot name="west" :css="westCss"></slot>
        </view>
        <view class="center">
          <slot :css="westCss">{{ ellipsis }}</slot>
        </view>
        <view class="east" :style="westStyle">
          <!-- #ifdef APP | H5 -->
          <base-buttons :light="light" :buttons="eastButtons" :buttonStyle="btnStyle" />
          <slot name="east" :css="westCss"></slot>
          <!-- #endif -->
        </view>
      </template>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import BaseButtons from '@/components/fab-nav-bar/components/BaseButtons.vue'
  import config from '@/utils/config';

  type Props = {
    // 标题 可使用默认插槽
    title ?: string
    // 亮色主题
    light ?: boolean
    // 返回链接使用redirect方式
    backRedirectUrl ?: string | (() => void)
    // 返回链接
    backUrl ?: string | (() => void)
    // 固定
    fixed ?: boolean
    // 背景
    background ?: string
    // 仅保留状态栏的高度
    onlyStatusBar ?: boolean
    // 按钮
    buttons ?: navbar.Button[]
  }

  const props = withDefaults(defineProps<Props>(), {
    light: false,
    fixed: false,
    onlyStatusBar: false,
    buttons: () => []
  })

  let { windowWidth, uniPlatform, statusBarHeight } = uni.getSystemInfoSync()

  // 状态栏高度 非小程序和APP时 statusBarHeight=0
  statusBarHeight = statusBarHeight ?? 0

  // 初始化
  let paddingRight = Math.ceil(windowWidth * 0.02)
  let paddingBottom = Math.ceil(paddingRight / 1.5)
  let paddingTop = statusBarHeight

  // 只显示状态栏时
  if (props.onlyStatusBar) {
    // web不设置上下边距
    if (uniPlatform == 'web') {
      paddingTop = 0
      paddingBottom = 0
    } else if (uniPlatform.indexOf('mp-') === 0) {
      //
    }
  } else {
    paddingTop += paddingBottom
  }

  // 导航栏样式
  let navCss = {
    width: windowWidth,
    height: 44 - paddingBottom * 2,
    padding: [paddingTop, paddingRight, paddingBottom, paddingRight]
  }

  // 用于west插槽自定义
  let westCss = {
    width: Math.ceil(windowWidth / 4),
    height: navCss.height,
  }

  let bounding : UniApp.GetMenuButtonBoundingClientRectRes
  // #ifdef MP-WEIXIN
  bounding = uni.getMenuButtonBoundingClientRect()

  // 胶囊距离右边像素
  paddingRight = windowWidth - bounding.right
  paddingBottom = bounding.top - statusBarHeight

  // 导航栏边距
  navCss.height = bounding.height
  navCss.padding = [bounding.top, paddingRight, paddingBottom, paddingRight]

  westCss.width = bounding.width
  westCss.height = bounding.height
  // #endif

  // 导航栏宽度
  navCss.width = windowWidth - (paddingRight * 2)

  const wrapperStyle = computed(() => {
    let items : { [name : string] : string } = {
      height: `${westCss.height}px`,
      width: `${navCss.width}px`,
      padding: `${navCss.padding.join('px ')}px`,
    }

    // #ifdef H5 | APP-PLUS
    if (props.onlyStatusBar) {
      items.height = '0px'
    }
    // #endif
    if (props.light) {
      items.color = '#ffffff'
    }

    if (props.background) {
      // 图片背景
      if(props.background.indexOf('/') === 0) {
        items.backgroundImage = `url(${config.imgUrl}${props.background})`
      } else {
        items.background = props.background === 'none' ? 'transparent' : props.background
      }
    }

    if (props.fixed) {
      items.position = 'fixed'
      items.top = '0'
      items.left = '0'
      items.right = '0'
    }

    return items
  })

  const westStyle = computed(() => {
    return {
      width: `${westCss.width}px`,
      height: `${navCss.height}px`
    }
  })

  const btnStyle = computed(() => {
    return {
      width: `${westCss.height}px`,
      height: `${westCss.height}px`
    }
  })

  // 标题超过7个字时省略显示
  const ellipsis = computed(() => {
    if (!props.title) {
      return '';
    }
    let value : string = props.title as string
    if (value.length > 7) {
      value = value.substring(0, 3) + '...' + value.substring(value.length - 3)
    }
    return value
  })

  // 左边按钮
  const westButtons = computed(() => {
    let hasBack = false
    let buttons : Array<navbar.Button> = []
    if (Array.isArray(props.buttons)) {
      buttons = props.buttons.filter((t) => {
        if (t.isBack) {
          hasBack = true;
        }
        return (t as navbar.Button).placement === 'west'
      })
    }

    if (false === hasBack) {
      if (props.backUrl || props.backRedirectUrl || getCurrentPages().length > 1) {
		  // buttons.backgroundImage = 'url('+ config1.$imgUrl +"/personal/back-icon.png')"
        buttons.push({
          icon: 'arrow-left',
          url: '@back',
        })
		// buttons
      }
    }
    return buttons.splice(0, 2)
  })

  // 右边按钮
  const eastButtons = computed(() => {
    if (typeof props.buttons == 'undefined') {
      return []
    }
    let buttons = props.buttons.filter((t) => {
      return (t as navbar.Button).placement !== 'west'
    })
    return buttons.splice(0, 2)
  })
</script>

<style lang="scss" scoped>
  .fab-nav-bar-container {
    .fab-nav-bar {
      width: 100%;
      display: flex;
      justify-content: space-between;
      z-index: 9999;
      background: {
        repeat: no-repeat;
        size: 100% auto;
        position: top center;
        color: $uni-bg-color-grey;
      }

      .west {
        display: flex;
        justify-content: flex-start;
      }

      .center {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        font: {
          size: 1rem;
          weight: bold;
        }
      }

      .east {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  view{
  	box-sizing: content-box;
  }
</style>